<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>弹性子元素属性-对齐</title>
    <style>
        /* 对齐 */
        /* 设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。 */

        /* 以下实例在第一个弹性子元素上设置了 margin-right: auto; 。 它将剩余的空间放置在元素的右侧： */
        .flex-container {
            display: -webkit-flex;
            display: flex;
            width: 400px;
            height: 250px;
            background-color: lightgrey;
        }

        .flex-item {
            background-color: cornflowerblue;
            width: 75px;
            height: 75px;
            margin: 10px;
        }

        .flex-item:first-child {
            margin-right: auto;
        }
    </style>
</head>

<body>

    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>

</body>

</html>